<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-position="left"
    class="main-from"
  >
    <p class="describe">
      <span class="text">●</span>
      招生委员会需要每位申请人提供两封推荐信作为重要评估资料，我们希望您的推荐人对您的管理方面的能力和工作成就有充分的了解，因此要求其中一封推荐信务必由您目前的或者曾经的直接领导来填写。
    </p>

    <p class="describe">
      <span class="text">●</span>
      请填写您的推荐人信息
      <span class="black">，电子邮箱必须为推荐人的公司邮箱</span>
      ，请确保推荐人信息的准确性，招生委员会可能会在评估的时候核实推荐人的信息或联系推荐人核实推荐信信息。
    </p>
    <p class="describe">
      <span class="text">●</span>
      点击“发送给推荐人”按钮，系统会自动发送邮件给推荐人，推荐人点开邮件中的链接完成推荐信内容并在线提交。推荐人提交推荐信后申请人可以收到相关的邮件或短信提醒。
    </p>
    <p class="describe">
      <span class="text">●</span>
      如果您需要更换推荐人，或者更新现有推荐人信息，请点击“更新推荐人”按钮进行编辑
    </p>
    <p class="describe">
      <span class="text">●</span>
      在推荐人填写推荐信期间，您可以先行提交报名表，提交报名表后仍可再次发送推荐信及更换推荐人。
    </p>
    <p class="title">目前或曾经的直接领导人</p>
    <el-form-item class="el-large" label="中文名" prop="cn_name">
      <el-input v-model="ruleForm.cn_name" />
      <div class="combination">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="先生"></el-radio>
          <el-radio label="女士"></el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item class="el-large" label="英文名" prop="en_name">
      <el-input v-model="ruleForm.en_name" />
    </el-form-item>
    <el-form-item class="el-large" label="单位" required>
      <el-form-item class="prop combination" prop="leaderChineseFullNameOne">
        <el-input v-model="ruleForm.leaderChineseFullNameOne" />
        <p class="hint">（中文全称）</p>
      </el-form-item>
      <el-form-item class="combination prop" prop="leaderEnglishFullNameOne">
        <el-input v-model="ruleForm.leaderEnglishFullNameOne" />
        <p class="hint">（英文全称）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item label="职位" class="el-large" required>
      <el-form-item class="prop combination" prop="cn_position_one">
        <el-input v-model="ruleForm.cn_position_one" />
        <p class="hint">（中文）</p>
      </el-form-item>
      <el-form-item class="prop combination" prop="en_position_one">
        <el-input v-model="ruleForm.en_position_one" />
        <p class="hint">（英文）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item class="el-large" label="手机" prop="mobile">
      <el-input v-model="ruleForm.mobile" />
    </el-form-item>
    <el-form-item class="el-large" label="电子信箱" prop="email">
      <el-input v-model="ruleForm.email" />
    </el-form-item>
    <el-form-item class="el-large" label="语言选项" prop="language">
      <el-radio-group v-model="ruleForm.language">
        <el-radio label="中文版推荐信"></el-radio>
        <el-radio label="英文版推荐信"></el-radio>
      </el-radio-group>
    </el-form-item>

    <p class="title">目前或曾经的直接领导人</p>
    <el-form-item class="el-large" label="中文名" prop="cn_name">
      <el-input v-model="ruleForm.cn_name" />
      <div class="combination">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="先生"></el-radio>
          <el-radio label="女士"></el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <el-form-item class="el-large" label="英文名" prop="en_name">
      <el-input v-model="ruleForm.en_name" />
    </el-form-item>
    <el-form-item class="el-large" label="单位" required>
      <el-form-item class="prop combination" prop="leaderChineseFullNameTwo">
        <el-input v-model="ruleForm.leaderChineseFullNameTwo" />
        <p class="hint">（中文全称）</p>
      </el-form-item>
      <el-form-item class="combination prop" prop="leaderEnglishFullNameTwo">
        <el-input v-model="ruleForm.leaderEnglishFullNameTwo" />
        <p class="hint">（英文全称）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item label="职位" class="el-large" required>
      <el-form-item class="prop combination" prop="cn_position_two">
        <el-input v-model="ruleForm.cn_position_two" />
        <p class="hint">（中文）</p>
      </el-form-item>
      <el-form-item class="prop combination" prop="en_position_two">
        <el-input v-model="ruleForm.en_position_two" />
        <p class="hint">（英文）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item class="el-large" label="手机" prop="mobile">
      <el-input v-model="ruleForm.mobile" />
    </el-form-item>
    <el-form-item class="el-large" label="电子信箱" prop="email">
      <el-input v-model="ruleForm.email" />
    </el-form-item>
    <el-form-item class="el-large" label="语言选项" prop="language">
      <el-radio-group v-model="ruleForm.language">
        <el-radio label="中文版推荐信"></el-radio>
        <el-radio label="英文版推荐信"></el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="footer-but">
      <el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
      <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import rules from "@/util/rules.js";
export default {
  name: "rinformation", //邀请推荐人
  props: {},
  data() {
    return {
      ruleForm: {
        cn_name: "",
        gender: "",
        en_name: "",
        cn_company: "",
        en_company: "",
        cn_position: "",
        en_position: "",
        mobile: "",
        email: "",
        language: "",
      },
      rules: rules,
    };
  },
  methods: {
    saveForm(formName) {
      console.log("保存");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-from {
  .flex {
    display: flex;
  }
  .describe {
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 30px;
    margin-bottom: 20px;
    .text {
      position: absolute;
      left: -10px;
      margin-left: 5px;
    }
    .black {
      color: #0b0b0b;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
    }
    .label {
      display: block;
    }
  }
  .title {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #003963;
    margin: 60px 0 30px;
  }

  .hint {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    margin-bottom: 10px;
  }
  .prop {
    ::v-deep .el-form-item__content {
      width: auto;
      display: block;
    }
  }
  .combination {
    margin-top: 15px;
  }
  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }
}

@media (max-width: 768px) {
  .main-from {
    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #003963;
      margin: 60px 0 30px;
    }

    .hint {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5a5a5a;
    }

    .describe,
    .label {
      font-size: 14px;
    }

    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;
      }
    }
  }
}
</style>
